<!DOCTYPE html>
<html lang=en
      xmlns:th="http://www.thymeleaf.org">
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title th:text="${page.title}" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<style>
    *{margin:0;padding:0}
    html{
        font-size: 15px;
        font-family: 'Open Sans', sans-serif;
        background: #f7f7f7;
        padding:16px
        width: 100%;
    }
    h1 {
        font-size: 24px;
        font-weight: 300;
        letter-spacing: -1px;
        color: #423a3f;
        margin-top: 32px;
    }
    body{
        width: 100%;
        height: 100%;
    }
    p {
        margin:11px 0 22px;
        overflow:hidden
        line-height: 1.75;
        letter-spacing: normal;
        text-align: center;
        color: #423a3f;
        margin-top: 12px;
    }
    a {
        text-decoration: none;
        font-size: 16px;
        line-height: 1.75;
        text-align: center;
        color: #3daa9b;
        margin-top: 32px;
    }
    #container {
        padding: 20% 10%;
        max-width: 80%;
        width: 380;
        text-align: center;
        margin: 0 auto;
    }
    img {
        width: 340px;
        max-width: 100%;
    }
</style>
<body>

<div id="container">
    <img th:src="|data:image/png;base64,${page.imageBase64}|" alt="Spilled Coffee" />
    <h1 th:text="${page.title}" />
    <p th:text="${page.explanation}" />
    <p><a th:href="${page.linkHref}" th:text="${page.linkText}" /></p>
</div>

<th:block th:if="${page.sentryErrorId != null and page.sentryPublicDsn != null}">
<script src="https://cdn.ravenjs.com/2.1.0/raven.min.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    Raven.showReportDialog({
        // grab the eventId generated by the Sentry SDK
        eventId: /*[[${page.sentryErrorId}]]*/ '',
        // use the public DSN (dont include your secret!)
        dsn: /*[[${page.sentryPublicDsn}]]*/ ''
    });
    /*]]>*/
</script>
</th:block>
</body>
</html>